<template>
  <div class="tool" >
    <el-row :gutter="20">
      <el-col :span="6">
    <span style="font-size: 30px">今天什么</span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="食谱:">
           <span style="font-size: 34px">{{currentFood}}</span>
          </el-form-item>




        </el-form>


        <div class="foodName">
<!--          <el-input style="font-size: 30px" v-model="currentFood" readonly placeholder="请输入内容"></el-input>-->
<!--        <input type="text" id="foodName" v-model="currentFood" readonly>-->
        <br>
          <div v-if="isAutoChanging">
            <el-button class="button" type="danger" @click="toggleAutoChange">停止</el-button>
          </div>
          <div v-else>
            <el-button class="button" type="success" @click="toggleAutoChange">开始</el-button>
          </div>
        <div class="image-container" style="padding-top: 40px">
          <img :src="currentImage" alt="Food Image" />
        </div>
      </div>


      </el-col>
      <el-col :span="18"><div >
         <span  style="font-size: 34px">食谱教程</span>
        <iframe :src="currentUrl" frameborder="0" :style="{'height': windowHeight * 0.9+'px','width':100+'%'}" >详细做法</iframe>
      </div></el-col>

    </el-row>



  </div>
</template>

<script>
import {randomFoodList} from "@/api/guide/method";
import {listEntries} from "@/api/base/entries";

export default {
  name: "randomFood",

  data() {
    return {
      entriesList: [],
      img: null,
      // 窗口的高度
      windowHeight: window.innerHeight,

      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        className: null,
        foodImages: [],
        tile: null,
      },
      form: {},
      foodNames: [],
      currentFoodIndex: 0,
      currentFood: "",
      intervalId: null,
      isAutoChanging: false,
      currentImage: "",
      currentUrl: ""
    };
  },

  created() {
    this.getrandomFoodList();
    this.startAutoChange();
  },

  methods: {
    getrandomFoodList() {
      console.log('11111')
      console.log('22222',window.innerHeight)
      const cachedEntriesList = localStorage.getItem('entriesList');
      if (cachedEntriesList) {
        this.entriesList = JSON.parse(cachedEntriesList);

        console.log('使用缓存数据', this.entriesList);
        this.startAutoChange();
      } else {
        randomFoodList(this.queryParams).then(response => {
          this.entriesList = response.rows;

          localStorage.setItem('entriesList', JSON.stringify(this.entriesList));
          console.log('11111', this.entriesList);

          this.startAutoChange();
        });
      }
    },


    changeFoodName() {
      this.currentFood = this.entriesList[this.currentFoodIndex].tile;
      this.currentImage = this.entriesList[this.currentFoodIndex].img;
      this.currentUrl = this.entriesList[this.currentFoodIndex].url; // 更新 currentUrl
      this.currentFoodIndex = (this.currentFoodIndex + 1) % this.entriesList.length;
    },

    startAutoChange() {
      if (!this.intervalId) {
        this.intervalId = setInterval(this.changeFoodName, 1000);
        this.isAutoChanging = true;
      }
    },

    stopAutoChange() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
        this.isAutoChanging = false;
      }
    },

    toggleAutoChange() {
      if (this.isAutoChanging) {
        this.stopAutoChange();
      } else {
        this.startAutoChange();
      }
    },

    preventF12AndRightClick() {
      document.onkeydown = function (e) {
        if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I') || (e.ctrlKey && e.key === 'U')) {
          e.preventDefault();
          alert('调试工具被禁用');
        }
      };

      window.oncontextmenu = function (e) {
        e.preventDefault();
        alert('右键菜单被禁用');
      };
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.tool {
  width: 100%;
  height: 100vh; /* 使工具区域占满整个视口高度 */
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
  overflow-y: auto;
  position: relative; /* 使子元素的绝对定位相对于此元素 */
}

.food-display {
  margin-bottom: 20px;

  width: 45%; /* 设置宽度 */
}


//.food-display input {
//  padding: 10px;
//  width: 200px;
//  margin-bottom: 10px;
//  border: 1px solid #ccc;
//  border-radius: 4px;
//}

.food-display button {
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}
.el-form-item__label{

  font-size: 20px;
}
.button{
  margin-top: 10px;
  margin-left: 200px;
}
.food-display button:hover {
  background-color: #45a049;
}
.image-container {
  display: flex;
  width: 800px;
  height: 800px;
  flex-direction: column; /* 确保子元素垂直排列 */
  gap: 10px; /* 添加子元素之间的间距 */
  margin-left: -100px;
}

.image-container img {
  border-radius: 20px 20px;

  object-fit: cover; /* 保持图片比例并裁剪 */
  margin-left: 100px;
}

iframe {
  width: 50%; /* 设置 iframe 宽度 */
  height: 300px; /* 设置 iframe 高度 */
  border: none; /* 去掉边框 */
}
.foodName{
  padding-left: 50px;
}

.image-container {
  display: flex;

  height: 300px; /* 设置容器高度 */
  flex-direction: column; /* 确保子元素垂直排列 */
  gap: 10px; /* 添加子元素之间的间距 */
}

.image-container img {
  border-radius: 20px 20px;
  width: 500px;
  height: 500px; /* 设置图片高度 */
  object-fit: cover; /* 保持图片比例并裁剪 */
}

.image-container a {
  text-decoration: none;
  color: rgba(175, 76, 155, 0.99);
  font-size: 16px;
  padding: 10px 20px;
  border: 1px solid #4CAF50;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.image-container a:hover {
  background-color: #4CAF50;
  color: white;
}

.el-card {
  border-radius: 8px;
  margin-bottom: 20px; /* 确保卡片之间有间距 */
  cursor: pointer; /* 添加鼠标指针样式 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.el-row::before, .el-row::after {
  content: "";
}

.el-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 鼠标经过时的阴影效果 */
  background-color: pink;
}

.first-level-row {
  margin-bottom: 20px;
}

.first-level-col {
  display: flex;
  justify-content: center;
}

.first-level-card {
  margin-top: 40px;
  width: 100%;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
  border-radius: 8px; /* 圆角 */
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.first-level-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 鼠标经过时的阴影效果 */
}
</style>
